import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../../config/app_color.dart';
import '../../../generated/assets.dart';
import '../home_logic.dart';
import '../models/model_home_game.dart';
import '../../../widgets/button/debounce_gesture_detector.dart';
import '../../../widgets/image/auto_image.dart';

/// 首页游戏分类切换按钮组件
class HomeGameTabs extends StatelessWidget {
  const HomeGameTabs({super.key, required this.logic});

  final HomeLogic logic;

  @override
  Widget build(BuildContext context) {
    // final HomeLogic logic = Get.find<HomeLogic>();

    return Obx(() {
      if (logic.gameTagList.isEmpty) {
        return const SizedBox.shrink();
      }

      return Container(
        margin: EdgeInsets.symmetric(horizontal: 16.w),
        padding: EdgeInsets.all(2.w),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: logic.gameTagList
                .map((tag) => _buildTabButton(logic, tag))
                .toList(),
          ),
        )
      );
    });
  }

  /// 构建单个标签按钮
  Widget _buildTabButton(HomeLogic logic, ModelHomeGame tag) {
    return Obx(() {
      final isSelected = logic.selectedGameTagId.value == tag.id;
      final iconAsset = _getTabIcon(tag.id ?? 1, isSelected);

      return DebounceGestureDetector(
        onTap: () => logic.switchGameTag(tag.id ?? 1),
        child: Container(
          width: 83.w,
          height: 36.w,
          decoration: BoxDecoration(
              color:isSelected ? AppColor.homeTabBackground : Colors.transparent,
              borderRadius: BorderRadius.circular(6.w)),
          // padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.w),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              // 图标
              AutoImage(
                iconAsset,
                width: 16.w,
                height: 16.w,
              ),

              4.horizontalSpace,

              // 标签名称
              Text(
                tag.name ?? '',
                style: TextStyle(
                  fontSize: 12.sp,
                  color: isSelected
                      ? AppColor.primary
                      : AppColor.textPrimary.withOpacity(0.7),
                  fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
                ),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
        ),
      );
    });
  }

  /// 根据标签ID和选中状态获取对应的图标资源
  String _getTabIcon(int tagId, bool isSelected) {
    switch (tagId) {
      case 1:
        return isSelected ? Assets.homeTab1Sel : Assets.homeTab1Nor;
      case 2:
        return isSelected ? Assets.homeTab2Sel : Assets.homeTab2Nor;
      case 4:
        return isSelected ? Assets.homeTab3Sel : Assets.homeTab3Nor;
      case 5:
        return isSelected ? Assets.homeTab4Sel : Assets.homeTab4Nor;
      default:
        // 默认使用第一个标签的图标
        return isSelected ? Assets.homeTab1Sel : Assets.homeTab1Nor;
    }
  }
}
